<template>
  <canvas
    :class="{
      'op-0': loading,
    }"
    :id="canvasId"
    :canvas-id="canvasId"
    :style="{ width: size + 'px', height: size + 'px' }"
  />
</template>

<script>
import uQR from "./uqrcode";

export default {
  props: {
    size: {
      type: Number,
      default: 120,
    },
    text: String,
  },
  data() {
    return {
      canvasId: "qr1",
      loading: true,
    };
  },
  watch: {
    text() {
      this.onMake();
    },
  },
  mounted() {
    this.onMake();
  },
  methods: {
    async onMake() {
      if (!this.text) return;
      try {
        const qr = new uQR();
        qr.data = this.text;
        qr.size = this.size;
        qr.make();
        const context = uni.createCanvasContext(this.canvasId, this); // 如果是组件，this必须传入
        qr.canvasContext = context;
        await qr.drawCanvas();
      } catch (error) {
        console.log(error);
      }
      this.loading = false;
    },
  },
};
</script>
